<template>
  <div class="app-container">
    <div class="header">
      <div class="back-icon" @click="goBack">←</div>
      <div class="title">产品图片</div>
    </div>
    <div class="image-container">
      <div v-for="(pic, index) in productPics" :key="index" class="image-item">
        <img :src="pic" alt="产品图片" style="width: 100%; height: auto;">
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoByAntiCounterfeitingNumber } from "@/api/cue/cueInfo";

export default {
  name: 'App',
  data() {
    return {
      antiCounterfeitingNumber: null,
      productPics: null,
    }
  },
  created() {
    this.getUrlQuery();
  },
  methods: {
    goBack() {
      this.$router.push({ path: '/cueAntiCounterfeiting', query: { antiCounterfeitingNumber: this.antiCounterfeitingNumber } })
      console.log('返回上一页');
    },
    // 获取当前链接的参数
    getUrlQuery() {
      let url = window.location.href;
      let reg = /[?&]([^?&#]+)=([^?&#]+)/g;
      let param = {};
      let ret = reg.exec(url);
      while (ret) {
        param[ret[1]] = ret[2];
        ret = reg.exec(url);
      }
      this.antiCounterfeitingNumber = param.antiCounterfeitingNumber;
      getInfoByAntiCounterfeitingNumber(this.antiCounterfeitingNumber).then(response => {
        this.productPics = response.data.cuePicList.split(',');
        // 这里如果 response 中没有相关图片数据逻辑，暂时不处理
      });
    }
  }
};
</script>

<style scoped>
/* 引入阿里巴巴数黑体粗体字体文件 */
@font-face {
  font-family: 'AlimamaShuHeiTi-Bold';
  src: url('~@/assets/fonts/AlimamaShuHeiTi-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* 通用样式 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'AlimamaShuHeiTi-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-weight: bold;
}

html {
  font-size: 16px;
}

body {
  background-color: #000;
  color: #fff;
  font-family: 'AlimamaShuHeiTi-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   /* 设置 body 高度为视口高度 */
  margin: 0; /* 去除 body 默认的外边距 */
}

.app-container {
  background-color: #000;
  color: #fff;
  padding: 1rem;
  max-width: 640px;
  margin: 0 auto;
  box-sizing: border-box; /* 确保内边距和边框包含在元素的总高度内 */
  height: 1000px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
  max-width: 640px; /* 限制 header 最大宽度 */
  margin-left: auto; /* 水平居中 */
  margin-right: auto; /* 水平居中 */
  position: relative; /* 确保 back-icon 定位正常 */
}

.back-icon {
  position: absolute;
  left: 1rem;
  cursor: pointer;
  font-size: 1.75rem; /* 将字体大小从 1.25rem 增大到 1.75rem，你可以根据需要调整这个值 */
}

.title {
  font-size: 1.25rem;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-item {
  width: 49%; /* 每行两张图片，留出一定间隙 */
  margin-bottom: 10px;
  border-radius: 10px; /* 添加圆角效果，数值可根据需求调整 */
  overflow: hidden; /* 确保图片圆角显示正常，隐藏超出部分 */
}

img {
  transition: transform 0.3s ease; /* 添加图片过渡效果，使图片在交互时更流畅 */
}

.image-item:hover img {
  transform: scale(1.05); /* 鼠标悬停时图片放大 */
}
</style>